<template>
	<view class="content">
		<view class="package-box">
			<view class="package-item"></view>
		</view>
		<view
			@touchstart="start"
			@touchmove="move"
			class="move"
			:style="{
				left: elLeft,
			}"></view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				elLeft: '50%',
				el: null,
				startInfo: {},
				windowWidth: 0,
				windowHeight: 0,
				top: 0,
				moveInfo: {}, // 底部托盘信息
				timerList: [], // 红包timer组
			}
		},
		onLoad() {
			console.log('=======', wx);
		},
		onReady() {
			console.log('加载完成');
			this.init();
		},
		onHide() {
			this.timerList.forEach(val => {
				clearInterval(val);
			});
		},
		methods: {
			init() {
				// 可视区宽度
				this.windowWidth = uni.getSystemInfoSync().windowWidth;
				// 可视区高度
				this.windowHeight = uni.getSystemInfoSync().windowHeight;
				
				// 托盘元素
				this.el = uni.createSelectorQuery().select('.move');
				this.el.boundingClientRect(data => {
					// console.log(data);
					this.moveInfo = data;
				}).exec();
			},
			start(e) {
				// console.log(e);
				this.startInfo = e.touches[0];
			},
			move(e) {
				let left = e.touches[0].pageX;
				let bool = left > this.startInfo.pageX;
				this.startInfo = e.touches[0];
				console.log(this.windowWidth, bool)
				this.el.boundingClientRect(data => {
					console.log(data)
					if (!bool && data.left <= 0) {
						left = data.width / 2;
					} else if (bool && data.right >= this.windowWidth) {
						left = this.windowWidth - data.width / 2;
					}
					this.elLeft = left + 'px';
				}).exec();
			},
		}
	}
</script>

<style lang="scss" scoped>
.content {
	position: relative;
	width: 100vw;
	height: 100vh;
	background: linear-gradient(#f00, #fff);
}
// 红包区域
.package-box {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: yellow;
	.package-item {
		position: absolute;
		top: -10%;
		left: 10%;
		width: 80rpx;
		height: 100rpx;
		background-color: aqua;
		transform: rotate(10deg);
		animation: package 7s linear;
	}
}
@keyframes package {
	0% {
		top: -10%;
	}
	100% {
		top: 100%;
	}
}

// 底部托盘
.move {
	position: absolute;
	bottom: 0;
	transform: translateX(-50%);
	width: 200rpx;
	height: 200rpx;
	background-color: green;
}
</style>
